<template>
  <view class="main">
    <view class="header">
      <image
        src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/aside.png"
        alt=""
        @click="showLeft = !showLeft"
      />
      <image
        src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/qianjin.png"
        alt=""
        class="qj"
      />
      <view></view>
    </view>
    <view class="middle">
<!--      <van-swipe
        indicator-color="white"
        show-indicators="true"
        @change="swipeChange"
      >
        <van-swipe-item v-for="image in images" :key="image">
          <image :src="image" class="images" />
        </van-swipe-item>
      </van-swipe> -->
      <!-- <view class="posterList" v-if="swipeIndex == 0">
	   -->
	   <view class="posterList" >
        <image v-for="image in images" :key="image" :src="image" class="images" />
      </view>
    </view>
    <view class="bottom">
      <view class="discover"></view>
      <view class="home" @click="toHome"></view>
      <view class="mine" @click="toUserPage"></view>
    </view>
    <van-popup v-model:show="showLeft" position="left" :style="{ width: '65.33vw', height: '89.16vh' }">
    	<view class="inner">
    		<view class="top">
    			<view class="popupBox" @click="toUserOrderList">
    				<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-6.png"
    					class="topImg" />我的订单
    			</view>
    			<view class="popupBox" @click="toUserPoints">
    				<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-7.png"
    					class="topImg" />积分账户
    			</view>
    			<view class="popupBox" @click="toMyOrder">
    				<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-8.png"
    					class="topImg" />我的预约
    			</view>
    			<view class="popupBox">
    				<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-9.png"
    					class="topImg" @click="showLeft = !showLeft" />400
    				8700
    				290
    			</view>
    		</view>
    		<view class="popupBottom">
    			<image class="bottomImg"
    				src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-10.png" alt=""
    				@click="showLeft = !showLeft" />
    			<image class="bottomImg" src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/scan.png"
    				alt="" @click="showLeft = !showLeft" />
    
    			<image class="bottomImg"
    				src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/friend.png" alt=""
    				@click="toFriendPage" />
    		</view>
    	</view>
    </van-popup>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
// import { useStore } from "../store/index";

const router = useRouter();
const images = ref([
  "https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/10.png",
  "https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/40.jpg",
  "https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/39.jpg",
]);
const swipeIndex = ref(0);
const showLeft = ref(false);

onMounted(()=>{
	console.log(getCurrentPages()[0]);
})

const toHome = () => {
  console.log("首页");
		uni.reLaunch({
		    url: '/pages/index/index'
		})
};

const swipeChange = (index) => {
  console.log("index", index);
  swipeIndex.value = index;
};
const toUserPage = () => {
		uni.reLaunch({
		    url: '/pages/userPage/index'
		})
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  width: 100vw;
  height: 100vh;
  color: $color-text;
  .header {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    z-index: 999999;
    height: 14.29%;
    width: 100%;
    padding: 0 3.07vw;
    padding-top: 2vh;
    image {
		height: 4.4vw;
      width: 4.4vw;
    }
    .qj {
		height: 4.68vh;
      width: 27.73vw;
    }
    // background-color: red;
  }
  .bottom {
    z-index: 99;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 10.22%;
    background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/discoverBottom.png")
      no-repeat center center;
    background-size: cover;
    box-shadow: 0px -5px 9px 1px rgba(0, 0, 0, 0.27);
    .discover,
    .mine {
      opacity: 0;
      position: absolute;
      top: 36%;
      right: 14%;
      height: 25%;
      width: 10.5%;
    }
    .discover {
      right: 75%;
    }
    .home {
      opacity: 0;
      position: absolute;
      top: 10%;
      right: 44%;
      height: 54%;
      width: 12%;
      border-radius: 50%;
    }
  }
  .middle {
    position: absolute;
    top: 0;
    right: 0;
    overflow: scroll;
    overflow-x: hidden;
    height: 90.1%;
    width: 100%;
    // background-color: red;
    .images {
      width: 100%;
      height: 100%;
    }
    .posterList {
      width: 100%;
      height: 100%;
      .images {
        width: 100%;
        height: 100%;
      }
    }
  }
}
// ::v-deep .el-carousel--horizontal {
//   width: 100%;
//   height: 100%;
// }
// ::v-deep .van-swipe {
//   position: relative;
//   width: 100%;
//   height: 100%;
// }
// ::v-deep .van-swipe__track {
//   display: flex;
//   width: 100%;
//   height: 100%;
// }
// ::v-deep .van-swipe-item {
//   width: 100%;
//   height: 100%;
// }
// ::v-deep .van-overlay {
//   z-index: 999999 !important;
//   height: 89.16vh;
//   top: 11.5%;
// }
// ::v-deep .van-popup--left {
//   // height: 89.16vh;
//   top: 56%;
// }
// ::v-deep .van-popup {
//   z-index: 999999 !important;
//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;
//   padding: 4.06vh 0 10.22vh 3.07vw;
//   background-color: rgba(135, 49, 46, 1);
//   .top {
//     display: flex;
//     flex-direction: column;
//     justify-content: space-between;
//     align-items: flex-start;
//     height: 30.91vh;
//     font-size: $font-size-large;
//     .popupBox {
//       display: flex;
//       align-items: center;
//       font-weight: bold;
//       image {
//         width: 9.33vw;
//         margin-right: 3.6vw;
//       }
//     }
//   }
//   .popupBottom {
//     display: flex;
//     align-items: flex-start;
//     image {
//       width: 6vw;
//       margin-right: 6vw;
//     }
//   }
// }
.inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 4.06vh 0 10.22vh 3.07vw;
		background-color: rgba(135, 49, 46, 1);
		width: 65.33vw;
		height: 74.2vh;

		.top {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			height: 30.91vh;
			font-size: $font-size-large;

			.popupBox {
				display: flex;
				align-items: center;
				font-weight: bold;

				.topImg {
					width: 9.33vw;
					height: 9.33vw;
					margin-right: 3.6vw;
				}
			}
		}

		.popupBottom {
			display: flex;
			align-items: flex-start;

			.bottomImg {
				width: 6vw;
				height: 6vw;
				margin-right: 6vw;
			}
		}
	}

	::v-deep .van-transition {
		height: 89.16vh;
		top: 11.5%;
	}

	::v-deep .van-popup {
		position: relative;
	}

	::v-deep .van-popup--left {
		position: absolute !important;
		top: unset !important;
		transform: unset !important;
		bottom: 0% !important;
	}
</style>
